<template>
	<div class="newBusiness">
		<h5 v-if='this_id'>入口编辑</h5>
		<h5 v-else>新增入口</h5>
		
		<div class="newBusiness_info">
			<div class="newBusiness_info_box">
				<h4>问题信息</h4>
				<form action="#" class="form">
					<div class="form_all">
						<ul>
							<li><span class="tit">入口名称</span>
								<el-input v-model="form.name" type="text" :rows="2" placeholder="请输入内容"></el-input>
							</li>
							<li><span class="tit">入口标识</span>
								<el-input v-model="form.discern" type="text" :rows="2" placeholder="请输入内容"></el-input>
							</li>
							<li><span class="tit">备注</span>
								<el-input v-model="form.desc" type="text" :rows="2" placeholder="请输入内容"></el-input>
							</li>
						</ul>
					</div>
				</form>
			</div>
		</div>
		
		<div  class="newBusiness_info type4">
			<div v-for="(item,index) in form.knowledge" :key="index" class="newBusiness_info_box">
				<h4>下级路径</h4>
				<div class="nextQuestionBox">
					<p class="questionID">知识库ID：{{item.id}}</p>
					<p class="questionTit">问题1：{{item.question}}</p>
					<div class="questionContent">
						<ul class="questionBtnList">
							<li><i class="el-icon-delete" @click.stop="toDelete(item.id)"></i></li>
							<li><i class="el-icon-edit" @click.stop="toDetail(item.id)"></i></li>
						</ul>
						<p class="keywords">关键词：{{item.keyword}}</p>
						<p v-if="item.type==1">回复方式：图文回复</p>
						<p v-else-if="item.type==2">回复方式：跳转人工</p>
						<p v-else-if="item.type==4">回复方式：下级选项</p>
						<p v-if="item.type==1">文字答案：{{item.answer}}</p>
						<p v-else-if="item.type==2">引导内容：{{item.answer}}</p>
						<p v-if="item.type==1" class="imglist">图片：<img v-for="(img,index1) in item.imgs" :src='img.path' :key="index1"/></p>

					</div>
				</div>
				
			</div>
			<div v-if="form.knowledge.length<9" class="addNextQuestion">
				<div class="addNextBtn" @click="addNext">添加下级路径</div>
			</div>
		</div>
		<div class="submitBtn">
			<button @click="toEdit">提交</button>
		</div>

		


		<el-dialog title="添加下级路径" :visible.sync="dialogTableVisible">
			<div class="dialogbox">
				<div class="newBusiness_info">
					<div class="newBusiness_info_box">
						<h4>问题信息</h4>
						<form action="#" class="form">
							<div class="form_all">
								<ul>
									<li class="line2em"><span class="tit">问题</span>
										<el-select v-model="thisnext" multiple filterable remote  placeholder="请输入关键词" :remote-method="remoteMethod"
										 :loading="loading">
											<el-option v-for="item in queList" :key="item.id" :label="item.question" :value="item.id">
											</el-option>
										</el-select>
									</li>
									<li class="line2em"><span class="tit">没有找到？</span>
											<div class="addNextBtn" @click="toDetail(0)">新增问题</div>
									</li>
								</ul>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogTableVisible = false">取 消</el-button>
				<el-button type="primary" @click="addNextFormList">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import ImagesUpload from '@/components/common/ImagesUpload.vue'
	export default {
		components: {
			ImagesUpload,
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			info: {
				type: Object,
			},
		},
		data() {
			return {
				user_id: null,
				this_id: null, //编辑跳转过来的id
				
				queList: [],
				form: {
					//账号信息
					id:null,
					name: "", //账号
					discern: "", 
					desc: "", 
					knowledge: [], 
					knowledge_list:"",
				},
				addNextBtn: true,
				dynamicTags: [],
				inputVisible: false,
				inputValue: '',
				inputshow: true,
				loading: false,

				dialogTableVisible: false,
				thisnext: null,

				editInfo: { //修改提交时用来比较那一项修改过了
					ori_password: '',
					realname: '',
					mobile: '',
					title: ''
				},
				pid:0,
				next_id:0,
			};
		},
		watch:{
		  $route(to,from){
		    if(to!=from){
				this.$router.go(0);
			}
		  }
		},
		mounted() {
			let this_id = this.$route.query.id;
			this.this_id = this_id ? this_id : null;
			let user_id = localStorage.getItem("user_id");
			this.user_id = Number(user_id);
			this.pid = this.$route.query.pid;
			this.next_id = this.$route.query.next;
			this.getShopStore();
			
		},
		methods: {
			//获取详情
			getShopStore() {
				if (this.this_id) {
					this.$http
						.post("/api/root/kefuAuto/welcomeInfo", {
							id: Number(this.this_id)
						})
						.then(res => {
							let imgs = res.data.imgs
							if (res.code == 1) {
								let data = res.data;
								this.form = data ? data : [];
								
								
								if(this.next_id){
									addNextFormList([item]);
								}
							}
						});
				}else{
					if(!this.form.son){
						this.form.son = [];
					}
					if(this.next_id){
						addNextFormList([item]);
					}
				}

			},
			handlerCheckbox() {

			},
			addNext() {
				this.dialogTableVisible = true;
			},
			remoteMethod(query) {
				if (query !== '') {
					this.loading = true;
					this.$http
						.post('/api/root/kefuAuto/knowledgeList', {
							page: 1,
							pagesize: 20,
							keyword: query,
						})
						.then(res => {
							if (res.code == 1) {
								let data = res.data.list;
								this.loading = false;
								this.queList = data;
								/*
								this.queList = data.filter(item => {
									console.log(item)
									
									return item.question.toLowerCase()
										.indexOf(query.toLowerCase()) > -1;
										
								});
								*/
							}
						});



				} else {
					this.options = [];
				}
			},

			handleSelect(item) {
				console.log(item);
			},
			addNextFormList(item) {
				
				this.thisnext.forEach(item=>{
					
					if(toString(this.form.knowledge_list).indexOf(item) == -1){
						this.$http
							.post("/api/root/kefuAuto/knowledgeInfo", {
								knowledge_id: item
							})
							.then(res => {
								if (res.code == 1) {
									let data = res.data;
									this.form.knowledge.push(data);
									if(this.form.knowledge_list == ""){
										this.form.knowledge_list = item;
									}else{
										this.form.knowledge_list = this.form.knowledge_list+','+item;
									}
								}else{
									this.$message.error(res.msg);
								}
							});
					}
				})
				
				console.log(this.form.knowledge_list,1111);
				this.thisnext = null;
				this.dialogTableVisible = false;
			},


			// 提交按钮
			toEdit() {
				if(this.form.id){
					this.$http.post('/api/root/kefuAuto/welcomeEdit', this.form).then(res => {
						if (res.code==1) {
							this.$router.back(1);
							this.$message({
								type: 'success',
								message: '添加成功'
							})
							setTimeout(function(){
								this.$router.push({path:'/welcomeList'});
							},1000)
						}else{
							this.$message.error(res.msg);
						}
					})
				}else{
					this.$http.post('/api/root/kefuAuto/welcomeAdd', this.form).then(res => {
						if (res.code==1) {
							this.$message({
								type: 'success',
								message: '修改成功'
							})
							setTimeout(function(){
								this.$router.push({name:'welcomeList'});
							},1000)
						}else{
							this.$message.error(res.msg);
						}
					})
				}
				
				
			   
			   
			},

			handleClose(tag) {
				this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
				if (this.dynamicTags.length < 5) {
					this.inputshow = true;
					this.inputVisible = false;
					this.inputValue = '';
				} else {
					this.inputshow = false;
					this.inputVisible = false;
					this.inputValue = '';
				}
			},
			

			showInput() {
				this.inputVisible = true;
				this.$nextTick(_ => {
					this.$refs.saveTagInput.$refs.input.focus();
				});
			},
			

			
			

			typeChange(val) {
				this.form.type == 2 ? this.form.is_human = 1 : this.form.is_human = 0;
			},
			toDetail(id){
				this.$router.push({name:'knowledgeDetail',query:{id}})
			},
			toDelete(id){
				this.$confirm('删除此下级路径？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(()=>{
					let newList = [];
					let newStr = "";
					this.form.knowledge.forEach(item=>{
						if(item.id!=id){
							newList.push(item);
							if(newStr == ""){
								newStr = item.id;
							}else{
								newStr = newStr+','+item.id;
							}
						}
					})
					this.form.knowledge = newList;
					this.form.knowledge_list = newStr;
				})
				
			},

		}
	};
</script>

<style lang="less" scoped>
	@import "welcomeDetail.less";
</style>
<style>
	.el-tag+.el-tag {
		margin-left: 10px;
	}

	.button-new-tag {
		margin-left: 10px;
		height: 32px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.newBusiness .newBusiness_info{
		background-color: #fff;
	}

	.newBusiness .newBusiness_info .newBusiness_info_box .form .form_all ul li span.el-tag el-tag--light {
		width: auto;
		text-align: center;
	}

	.input-new-tag {
		width: 90px;
		margin-left: 10px;
		vertical-align: bottom;
	}

	.uoloadSty .el-upload--picture-card {
		width: 110px;
		height: 110px;
		line-height: 110px;
	}

	.disUoloadSty .el-upload--picture-card {
		display: none;
		/* 上传按钮隐藏 */
	}


	/*
	.button-new-img{
		width: 80px;
		height: 80px;
		font-size: 40px;
		text-align: center;
		line-height: 80px;
		vertical-align: middle;
	}
	
	.imgbox .imgwrap{
		width: 80px;
		margin-right: 10px;
		height: 80px;
		display: inline-block;
		overflow: hidden;
		position: relative;
		vertical-align: middle;
		border: 2px solid #C0C0C0;
		
	}
	.imgbox .imgwrap img{
		width: 100%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
	*/
	.addNextQuestion {
		width: 100%;
		padding: 20px 0;
	}

	.addNextBtn {
		display: inline-block;
		font-size: 20px;
		height: 2em;
		line-height: 2em;
		border-radius: 6px;
		background-color: #0080FF;
		color: #fff;
		padding: 0 10px;
		cursor: pointer;
	}


	.nextQuestionBox {
		width: 100%;
		padding: 20px 0;
		margin: 0;
		border-bottom: 2px solid #C0C0C0;
	}

	.nextQuestionBox .questionTit {
		font-size: 18px;
		line-height: 2em;
	}

	.nextQuestionBox .questionID {
		font-size: 20px;
		line-height: 2em;
		color: #000FFF;
	}

	.nextQuestionBox .questionContent {
		width: calc(100% - 80px);
		padding-left: 80px;
		position: relative;
	}

	.questionContent ul {
		list-style: none;
		position: absolute;
		left: 0;
		top: 0;
	}

	.questionContent ul li {
		width: 30px;
		height: 30px;
		margin-right: 8px;
		display: inline-block;
		border: 2px solid #C0C0C0;
		position: relative;
	}
	
	.questionContent ul li i {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}

	.questionContent p {
		padding: 2px 0;
	}

	.questionContent p.keywords {
		padding: 8px 0;
	}

	.questionContent .imglist {
		height: 80px;
	}

	.questionContent .imglist img {
		width: 80px;
		height: 80px;
		margin-right: 10px;
		vertical-align: top;
	}

	.imgbox {
		height: 100%;
		width: 100%;
		overflow: hidden;
	}

	.logoShadow {
		position: relative;
		width: 80px;
		height: 80px;
		display: inline-block;
		margin-right: 10px;
	}

	.logoShadow img {
		width: 100%;
		height: 100%;
	}

	.logoShadow .deleteShadow {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		display: flex;
		opacity: 0;
		color: #fff;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transition: 0.2s;

		i {
			cursor: pointer;
		}
	}

	.logoShadow:hover .deleteShadow {
		opacity: 1;
	}

	.uploadImg {
		width: 80px;
		height: 80px;
		position: relative;
		border: 1px solid rgba(0, 0, 0, 0.3);
		display: inline-block;

	}

	.newBusiness .newBusiness_info .newBusiness_info_box .form .form_all ul li .uploadImg input.inputIMG {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		opacity: 0;
		padding: 0;
		margin: 0;
	}

	.uploadImg .fileImg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		text-align: center;
		line-height: 80px;
	}

	.el-dialog {
		width: 80%;

	}

	.el-dialog__body {
		padding: 0;
	}

	.el-dialog .el-dialog__body {
		background-color: #f5f5f5;
	}
</style>
